import {
    useTagViewStore,
    useTagViewStoreWithSetup,
} from "@/store/modules/tag-view-store";
import { NslUtils } from "@/utils/NslUtil";
import { cssGlobalVariableMap } from "@/utils/NslUtil4Css";
import { TypeCssGlobalVariableEnum } from "@/utils/util_type";
import { storeToRefs } from "pinia";
import { Ref, computed, ref } from "vue";
import {
    RouteLocationNormalizedLoaded,
    RouteRecordRaw,
    Router,
} from "vue-router";
import { moveToCurrentTag, pushRouteAndMove2Tag } from "./tag_view_fns";
let router: Router,
    elScrollWrapDom: HTMLDivElement,
    menuLeft: Ref<number>,
    menuTop: Ref<number>,
    tagMenuVisible: Ref<boolean>;

const lastTagComp = computed(() => {
    return visitedViewTagsRef.value[visitedViewTagsRef.value.length - 1];
});

const tagInitValue = {
    path: "",
    fullPath: "",
    name: "",
    title: "",
    affix: false,
    keepAlive: false,
};
const selectedTag = ref<TypeTagViewI>(Object.assign({}, tagInitValue));

const tagViewStore = useTagViewStoreWithSetup();
const { visitedViews: visitedViewTagsRef } = storeToRefs(tagViewStore);

export function initTagContextMenuParameters(
    routerP: Router,
    elScrollWrapDomP: HTMLDivElement,
    menuLeftP: Ref<number>,
    menuTopP: Ref<number>,
    tagMenuVisibleP: Ref<boolean>
) {
    router = routerP;
    elScrollWrapDom = elScrollWrapDomP;
    menuLeft = menuLeftP;
    menuTop = menuTopP;
    tagMenuVisible = tagMenuVisibleP;
}

export function refreshSelectedTag(view: TypeTagViewI) {
    //tagViewStore.delCachedView(view);
    const { fullPath } = view;
    //   nextTick(() => {
    router.replace({ path: "/redirect" + fullPath });
    //   });
}

export function openTagMenuAndReturnSelectedTag(
    tag: TypeTagViewI,
    e: MouseEvent
) {
    const menuMinWidth = 105;

    const offsetLeft = elScrollWrapDom.getBoundingClientRect().left; // container margin left

    const offsetWidth = elScrollWrapDom.offsetWidth; // container width
    //   console.log('offsetLeft',offsetLeft);
    //   console.log('offsetWidth',offsetWidth);
    //   console.log('e.clientX',e.clientX);

    const maxLeft = offsetWidth - menuMinWidth; // left boundary
    const l = e.clientX - offsetLeft + 10; // 15: margin right

    if (l > maxLeft) {
        menuLeft.value = maxLeft;
    } else {
        menuLeft.value = l;
    }

    menuTop.value =
        e.clientY -
        NslUtils.toInt(
            cssGlobalVariableMap.get(
                TypeCssGlobalVariableEnum.LAYOUT_HEAD_HEIGHT
            )
        );
    tagMenuVisible.value = true;
    selectedTag.value = tag;
    return tag;
}

export function isFirstView() {
    return selectedTag.value.fullPath === tagViewStore.visitedViews[0].fullPath;
}

export function isLastView() {
    return (
        selectedTag.value.fullPath ===
        tagViewStore.visitedViews[tagViewStore.visitedViews.length - 1].fullPath
    );
}

export function closeLeftTags(fullPath: string) {
    tagViewStore.delLeftViews(selectedTag.value);
    if (
        !visitedViewTagsRef.value.find(
            (item: any) => item.fullPath === fullPath
        )
    ) {
        pushRouteAndMove2Tag(lastTagComp.value.fullPath);
    }
}
export function closeRightTags(fullPath: string) {
    console.log("selectedTag.value", selectedTag.value);
    tagViewStore.delRightViews(selectedTag.value);
    if (
        !visitedViewTagsRef.value.find(
            (item: any) => item.fullPath === fullPath
        )
    ) {
        console.log("lastTagComp.value", lastTagComp.value.fullPath);
        pushRouteAndMove2Tag(lastTagComp.value.fullPath);
    }
}

export function closeOtherTags() {
    router.push(selectedTag.value);
    tagViewStore.delOtherViews(selectedTag.value);
    moveToCurrentTag(selectedTag.value.fullPath);
}

export function closeAllTags() {
    tagViewStore.delAllViews();
    pushRouteAndMove2Tag(lastTagComp.value.fullPath);
}
